/* pages/home/home.wxss */
.page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  padding-bottom: 40rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .swiperCon {
    width: 100%;
    height: 500rpx;
    position: relative;

    .swiper {
      width: 100%;
      height: 500rpx;
      overflow: hidden;
    }

    .swiperimg {

    }

    .swiperDot {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 40rpx;
      left: 0px;
      width: 100%;

      .dot {
        width: 14rpx;
        height: 14rpx;
        margin: 0px 15rpx;
        background: rgb(255, 255, 255);
        opacity: 0.3;
        border-radius: 50%;
      }

      .acdot {
        opacity: 1;
      }
    }
  }

  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 30rpx 50rpx 50rpx 50rpx;

    .storyInfo {
      display: flex;
      justify-content: space-between;
    }

    .storyInfoL {
      width: 560rpx;

      .tit {
        color: rgb(255, 255, 255);
        font-family: 思源黑体 CN;
        font-size: 45rpx;
        font-weight: 350;
        line-height: 68rpx;
        letter-spacing: 3.6rpx;
        text-align: left;
      }

      .des {
        margin-top: 14.67rpx;
        display: flex;
        width: 80%;
        flex-direction: column;
        color: rgb(255, 255, 255);
        font-family: Helvetica;
        font-size: 23rpx;
        font-weight: 300;
        line-height: 35rpx;
        letter-spacing: 1.84rpx;
        text-align: left;
      }

      .time {
        display: flex;
        flex-direction: column;
        margin-top: 23.85rpx;
        color: rgb(255, 255, 255);
        font-family: Helvetica;
        font-size: 23rpx;
        font-weight: 300;
        line-height: 35rpx;
        letter-spacing: 1.84rpx;
        text-align: left;
      }
    }

    .storyInfoR {
      display: flex;
      flex-direction: column;
      align-items: center;

      .wei {
        width: 25.35rpx;
        margin-top: 15rpx;
      }

      .mi {
        margin-top: 5.33rpx;
        color: rgb(255, 255, 255);
        font-family: Helvetica;
        font-size: 28rpx;
        font-weight: 300;
        line-height: 28rpx;
        letter-spacing: 2.24rpx;
        text-align: center;
      }
    }

    .btnbox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 39.68rpx;

      .btn {
        position: relative;
        width: 250rpx;
        color: rgb(150, 118, 67);
        font-family: 思源黑体 CN;
        font-size: 23rpx;
        font-weight: 350;
        line-height: 23rpx;
        letter-spacing: 0px;

        .text1{
          position: absolute;
          height:100%;
          display: flex;
          align-items: center;
          left:38%;
        }

        .text2{
          position: absolute;
          height:100%;
          display: flex;
          align-items: center;
          left:32%;
        }
      }
    }

    .line {
      width: 100%;
      margin-top: 32rpx;
      margin-bottom: 28rpx;
    }

    .stoTit {
      color: rgb(255, 255, 255);
      font-family: PingFang SC;
      font-size: 30rpx;
      font-weight: 350;
      line-height: 35rpx;
      letter-spacing: 1.84rpx;
      text-align: center;
    }
    .stoTitSmall {
      color: rgb(255, 255, 255);
      font-family: Helvetica;
      font-size: 26rpx;
      height:35rpx;
      line-height: 35rpx;
      letter-spacing: 1.84rpx;
      text-align: center;
      margin-bottom: 36.02rpx;
    }

    .progress {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .progressOne {
        width: 550rpx;
        height: 65rpx;
        box-sizing: border-box;
        border: 1px solid rgb(219, 190, 144);
        border-radius: 5rpx;
        background: rgba(255, 255, 255, 0.1);
        color: rgb(255, 255, 255);
        font-family: Helvetica;
        font-size: 25rpx;
        font-weight: 300;
        line-height: 65rpx;
        letter-spacing: 2rpx;
        margin-bottom: 20rpx;
        /*padding-left:90rpx;*/
        text-align: center;
        &:last-child {
          margin-bottom: 0px;
        }

        .progressOneText0 {
          animation: progressOneText_move 6s linear infinite;
          @keyframes progressOneText_move {
            0%{ opacity:0.1;}
            25%{ opacity:1;}
          }
        }
        .progressOneText1 {
          animation: progressOneText_move 6s linear infinite;
          animation-delay: 2s;
          @keyframes progressOneText_move {
            0%{ opacity:0.1;}
            25%{ opacity:1;}
          }
        }
        .progressOneText2 {
          animation: progressOneText_move 6s linear infinite;
          animation-delay: 4s;
          @keyframes progressOneText_move {
            0%{ opacity:0.1;}
            25%{ opacity:1;}
          }
        }


      }



    }

    .yueBox {
      margin-top: 66rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      image{
        width: 300rpx;
      }
    }
  }

}

.dialog-body{
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  .picture{
    width: 110rpx;
    height: 110rpx;
    border-radius: 50%;
    overflow: hidden;
    border:2px solid #ffffff;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .name{
    font-size: 23rpx;
    margin-top: 6rpx;
  }
  .t2{
    font-size: 35rpx;
    margin-top: 16rpx;
  }
  .t3{
    font-size: 26rpx;
    line-height: 50rpx;
  }

}
